<template>
  <div>{{ list }}</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, PropType } from 'vue'
import { emitter } from '../../index'
// type => 类型别名
type ListPropsType = {
  id: string | number
  goods: string
}

export default defineComponent({
  name: 'nav-content',
  props: {
    list: {
      type: Array as PropType<ListPropsType[]>
    }
  },
  // data() {
  //   return {}
  // },

  setup(props, context) {
    // 1. 定义数据 (proxy 响应式数据)
    const state = reactive({
      msg: '你好，我是Vue3的足迹'
    })
    const inputRef = ref('')

    const callback = (item: any) => {
      console.log('item:---兄弟组件-navContent', item)
    }
    emitter.on('nav-bar-title', callback)

    // setTimeout(() => {
    //   state.msg = '我是更改后的数据'
    //   console.log('state:', state)
    //   console.log('...state:', { ...state })
    // }, 1000)

    // // setup抛出数据不能直接解构，但是可以借助vue3提供的其他方法解构->toRefs
    // const { msg } = toRefs(state)
    // console.log('msg:', msg)
    return {
      state,
      inputRef
    }
  }
})
</script>
